/*
 * @Author: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @Date: 2024-10-09 11:10:31
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-22 17:09:28
 * @FilePath: \ft-apply-admin\src\views\DataCenter\HRStatement\component\data.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
function getRatio(size) {
  const { availWidth } = window.screen;
  return size * (availWidth / 1920)
}

const colorList = ['#f9804e', '#016FFC', '#15CD86', '#FDB700',]
export const getProgressOptions = (getvalue, color) => {
  return {
    title: {
      text: getvalue + '%',
      textStyle: {
        color: '#333',
        fontSize: getRatio(14),
        fontFamily: 'pingfang',
      },
      itemGap: getRatio(20),
      left: 'center',
      top: '36%'
    },
    angleAxis: {
      max: 100,
      clockwise: true, // 逆时针
      show: false // 隐藏刻度线
    },
    radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false
      },
    },
    polar: {
      center: ['50%', '50%'],
      radius: '180%' // 图形大小
    },
    series: [
      {
        type: 'bar',
        data: getvalue,
        showBackground: true,
        backgroundStyle: {
          color: '#d2d7ef',
        },
        coordinateSystem: 'polar',
        roundCap: true,
        barWidth: getRatio(5),
        itemStyle: {
          normal: {
            opacity: 1,
            color: color.value,
            shadowBlur: 0,
            shadowColor: '#fff',
          }
        },
      },
      {
        type: 'pie',
        data: [100],
        z: 3,
        radius: ['70%', '0%'],
        center: ['50%', '50%'],
        itemStyle: {
          normal: {
            color: '#eef2fd',
          }
        },
        silent: true,
        labelLine: {
          normal: {
            show: false
          }
        }
      },
    ],
  };
}
export const getWaterPoloOptions = (data, year) => {
  return {
    title: {
      text: '',
    },
    graphic: [{
      type: 'group',
      left: 'center',
      top: '58%',
      children: [{
        type: 'text',
        z: 100,
        left: '10',
        top: 'middle',
        style: {
          fill: '#fff',
          text: year + '届招聘目标完成率',
          fontSize: getRatio(20),
          fontFamily: 'pingfang'
        }
      }]
    }, {
      type: 'group',
      left: 'center',
      top: '43%',
      children: [{
        type: 'text',
        z: 100,
        left: '200',
        top: 'middle',
        style: {
          fill: '#fff',
          // text: data *100 +'%',
          text: `{a|${(data * 100).toFixed(2)}}{b|%}`,
          fontWeight: 700,
          fontFamily: 'pingfang',
          rich: {
            a: {
              fontSize: getRatio(80),
              align: 'right', // 右对齐
            },
            b: {
              fontSize: getRatio(40),
              align: 'right', // 右对齐
              padding: [getRatio(20), 0, 0, 0], // 可以设置右侧间距
            }
          }
        }
      }]
    }],
    series: [
      {
        type: 'liquidFill',
        radius: '68.1%',
        center: ['50%', '50%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#95C4FF', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#016FFC', // 100% 处的颜色
              },
            ],
          },
        ],
        data: [data, data], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 0,
          opacity: 0
        },
        outline: {
          show: false,
        },
        itemStyle: {
          opacity: 0.95,
          shadowColor: 'rgba(0, 0, 0, 0)',
        },
        label: {
          show: false
        }
      },
    ],
  };
}
export const getRingOptions = (data, target) => {
  let source = ['50%', '50%'];
  return {
    title: {
      text: `{a|${target}}\n{b|目标数量}`,
      top: '40%',
      textStyle: {
        color: '#333',
        fontSize: getRatio(14),
        rich: {
          a: {
            fontSize: getRatio(18),
            align: 'center', // 右对齐
            fontFamily: 'pingfang',
            fontWeight: 700,
          },
          b: {
            fontSize: getRatio(16),
            align: 'center', // 右对齐
            fontFamily: 'pingfang',
            padding: [getRatio(4), 0, 0, 0]
          }
        },
      },

      itemGap: 20,
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
      // formatter: "{b}: {c} ({d}%)",
      formatter: (params) => {
        const param = data[params.dataIndex]
        return ` ${param.name}:${param.number} (${param.value}%)`; // 显示 value 和百分比
      },
      fontFamily: 'pingfang',
    },
    legend: {
      icon: 'circle',
      orient: 'horizontal',
      left: 'center',
      bottom: 0,  // 增加底部位置
      itemWidth: getRatio(6),
      itemHeight: getRatio(6),
      textStyle: {
        fontFamily: 'pingfang',
        color: '#333',
        fontSize: getRatio(12),
      }
    },
    series: [
      {
        type: 'pie',
        data: [100],
        z: 2,
        radius: ['80%', '0%'],
        center: source,
        itemStyle: {
          normal: {
            color: '#e8edfe',
            borderColor: '#d1dcfe',  // 设置边框颜色为蓝色
            borderWidth: 1,
          }
        },
        silent: true,
        labelLine: {
          normal: {
            show: false
          }
        }
      }, {
        type: 'pie',
        data: [100],
        z: 1,
        radius: ['70%', '0%'],
        center: source,
        itemStyle: {
          normal: {
            color: '#dbd7d6',
            fontFamily: 'pingfang',
          }
        },
        silent: true,
        labelLine: {
          normal: {
            show: false
          }
        }
      },
      {
        type: 'pie',
        data: [100],
        z: 3,
        radius: ['45%', '55%'],
        center: source,
        itemStyle: {
          normal: {
            color: '#ebeffa',
            borderColor: '#b6cdfe',  // 设置边框颜色为蓝色
            borderWidth: 1,
            borderType: 'dashed',          // 设置边框宽度为 2 像素
          }
        },
        silent: true,
        labelLine: {
          normal: {
            show: false
          }
        }
      },
      {
        type: 'pie',
        data: [100],
        z: 4,
        radius: ['45%', '0%'],
        center: source,
        itemStyle: {
          normal: {
            color: '#ebeffa',
            borderColor: '#b6cdfe',  // 设置边框颜色为蓝色
            borderWidth: 1,          // 设置边框宽度为 2 像素
          }
        },
        silent: true,
        labelLine: {
          normal: {
            show: false
          }
        }
      }, {
        type: 'pie',
        data: [100],
        z: 3,
        radius: ['31%', '0%'],
        center: source,
        itemStyle: {
          normal: {
            color: '#dbd7d6',
            fontFamily: 'pingfang',
          }
        },
        silent: true,
        labelLine: {
          normal: {
            show: false
          }
        }
      },
      {
        type: 'pie',
        z: 4,
        radius: ['60%', '75%'],
        center: source,
        color: ['#6695ed', '#ff7f4e', '#87cefa', '#33cd31'],
        label: {
          normal: {
            show: false,
            position: 'center',
            fontFamily: 'pingfang',
          },
          emphasis: {
            show: false,
            textStyle: {
              fontSize: getRatio(14),
              fontWeight: '500',
              fontFamily: 'pingfang',
            }
          }
        },
        labelLine: {
          normal: {
            show: false
          }
        },
        data: data.map((item) => ({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: item.color // 根据索引设置不同颜色
          }
        }))
      }
    ],
  };

}

export const getPieOptions = (target, label, list) => {
  return {
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        const param = list[params.dataIndex]
        return ` ${param.name}:${param.number} (${param.value}%)`; // 显示 value 和百分比
      },
      fontFamily: 'pingfang',
    },
    title: {
      text: `{a|${target}}\n{b|${label}}`,
      top: '50%',
      textStyle: {
        color: '#333',
        fontSize: getRatio(14),
        rich: {
          a: {
            fontSize: getRatio(20),
            align: 'center', // 右对齐
            fontFamily: 'pingfang',
            fontWeight: 700,
          },
          b: {
            fontSize: getRatio(16),
            align: 'center', // 右对齐
            fontFamily: 'pingfang',
            padding: [getRatio(4), 0, 0, 0]
          }
        },
      },

      itemGap: 20,
      left: 'center',
    },
    legend: {
      icon: 'circle',
      orient: 'horizontal',
      left: 'center',
      bottom: getRatio(20),  // 增加底部位置
      itemWidth: getRatio(10),
      itemHeight: getRatio(10),
      textStyle: {
        fontFamily: 'pingfang',
        color: '#333',
        fontSize: getRatio(12)
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '100%'],
        center: ['50%', '70%'],
        // adjust the start and end angle
        startAngle: 180,
        endAngle: 360,
        label: {
          show: true,
          position: 'inside', // 将文字放在块内
          fontSize: getRatio(14),
          fontFamily: "pingfang",
          color: '#333', // 你可以根据需要调整字体大小
          formatter: (params) => {
            return ` ${params.value}%`; // 显示 value 和百分比
          }
        },
        data: list.map(item => ({
          value: item.value,
          name: item.name,
          itemStyle: {
            color: item.color // 从 list 数据中获取 color 字段
          }
        }))
      }
    ]
  };
}

export const getCategoryOptions = (dimensions, source, list) => {
  return {
    legend: {
      icon: 'circle',
      orient: 'horizontal',
      left: 'center',
      bottom: getRatio(20),
      itemWidth: getRatio(10),
      itemHeight: getRatio(10),
      textStyle: {
        fontFamily: 'pingfang',
        color: '#333',
        fontSize: getRatio(12)
      }
    },

    tooltip: {},
    dataset: {
      dimensions,
      source,
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        fontSize: getRatio(12)  // 设置字体大小为16
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}%',  // 在Y轴的文字后面加上百分号
      }
    },
    series: list.map((el, idx) => {
      return {
        type: 'bar', barWidth: '10%', itemStyle: {
          borderRadius: [5, 5, 0, 0], color: colorList[idx]
        }
      }
    })
  };
}

export const getFunnelOptions = (data, bgData) => {
  return {
    series: [
      {
        name: '预期',
        type: 'funnel',
        left: '0%',
        width: '70%', // 增加宽度
        top: '5%',
        min: 0,
        max: 100,
        minSize: '0%',
        maxSize: '100%',
        sort: 'descending', // 按照数据降序排列
        gap: getRatio(2), // 漏斗层之间的间距
        label: {
          normal: {
            position: 'outside',
            formatter: (params) => {
              const param = data[params.dataIndex]
              return ` ${param.name}：${param.number} (${param.value}%)`; // 显示 value 和百分比
            },
            textStyle: {
              color: '#333', // 改变文字颜色
              fontSize: getRatio(12), // 调整字体大小
              fontFamily: "pingfang"
            }
          }
        },
        labelLine: {
          normal: {
            show: true,
            length: getRatio(20), // 调整引导线的长度
            lineStyle: {
              color: "#209ee4"
            }
          }
        },
        itemStyle: {
          normal: {
            color: (params) => {
              // 使用渐变色
              const colorList = [
                ['#a2d8f8', '#57b5f9'],
                ['#7bcdf8', '#39a4f8'],
                ['#4fbcf9', '#2b97f8'],
                ['#2aa5f9', '#0b80f8'],
                ['#0f90f9', '#005fb8']
              ];
              // 安全检查，确保 dataIndex 不超出 colorList 的长度
              const colorPair = colorList[params.dataIndex % colorList.length];
              return {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: colorPair[0]
                }, {
                  offset: 1, color: colorPair[1]
                }]
              };
            },
            borderColor: '#dbedfb',
            borderWidth: getRatio(2)
          }
        },
        data: bgData, // 你的预期数据
      },
      {
        name: '实际',
        type: 'funnel',
        left: '0%',
        width: '70%',
        maxSize: '70%', // 让 "实际" 部分的漏斗稍微窄一点
        top: '5%',
        label: {
          normal: {
            position: 'inside',
            formatter: '{c}%',
            textStyle: {
              color: '#fff', // 实际漏斗内文字的颜色
              fontSize: getRatio(14),
              fontFamily: "pingfang"
            }
          }
        },
        itemStyle: {
          normal: {
            color: (params) => {
              // 使用稍深的渐变色
              const colorList = [
                ['#4daef7', '#2a8df7'],
                ['#4a9ff7', '#2186f7'],
                ['#3b8df7', '#1d7af7'],
                ['#2f7cf7', '#1667f7'],
                ['#2569f7', '#1350f7']
              ];
              // 安全检查，确保 dataIndex 不超出 colorList 的长度
              const colorPair = colorList[params.dataIndex % colorList.length];
              return {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0, color: colorPair[0]
                }, {
                  offset: 1, color: colorPair[1]
                }]
              };
            },
            borderColor: '#dbedfb',
            borderWidth: getRatio(2)
          }
        },
        data: data // 你的实际数据
      }
    ]
  };
}
